<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
        }
        /*.v-enter,*/
        /*.v-leave-to{*/
            /*opacity: 0;*/
        /*}*/

        /*.v-enter-active,*/
        /*.v-leave-active{*/
            /*opacity: 1;*/
            /*transform: translate(100px, 200px);*/
        /*}*/
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="添加" @click="flag = !flag">
    <transition
    v-on:before-enter = "beforeEnter"
    v-on:enter = "enter"
    v-on:after-enter="afterEnter">
    <div class="ball" v-show="flag"></div>
    </transition>
</div>

</body>
<script>

var vm = new Vue({
    el: '#app',
    data: {
        msg: '大家好哈哈哈哈，你们好啊。',
        flag: false
    },
    methods:{
        beforeEnter(el){
            el.style.transform = 'translate(0,0)'
        },
        enter(el,done){
            el.offsetWidth;
            el.style.transform = 'translate(100px,500px)';
            el.style.transition = 'all 1s ease';

            done();
        },
        afterEnter(el){
            this.flag = false;
        }

    }
})
</script>
</html>